<template>
  <div>
    消息内容
    <ul>
      <li v-for="m in messages" :key="m.id">
        <router-link :to="{
                  path:'/student/messages/message',
                  query:{
                    id:m.id,
                    title:m.title
                  }
                }">{{ m.title }}
          <button @click="pushgo">push</button>
          <button @click="replacego">replace</button>
        </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Messages",
destroyed() {
  console.log('MESSAGES控件被销毁了')
},
  data() {
    return {
      messages: [
        {id: '001', title: "消息1"},
        {id: '002', title: "消息2"},
        {id: '003', title: "消息3"}
      ]
    }
  },
  methods:{
    replacego(m){
      this.$router.replace({ path:'/student/messages/message',
        query:{
          id:m.id,
          title:m.title
        }})
    },
    pushgo(m){
      this.$router.push({ path:'/student/messages/message',
        query:{
          id:m.id,
          title:m.title
        }})
    }
  }
}
</script>

<style scoped>

</style>
